<template>
  <div class="body">
    <header>
      <span class="jump" @click="gotoSeeAllData">查看海洋监测各项指标</span>
      <h1>省市级海洋水质情况实时监测系统</h1>
      <div class="showTime">当前时间：{{ time }}<span></span></div>
    </header>
    <section class="mainbox">
      <div class="column">
        <!-- 静态数据 -->
        <div class="panel overview">
          <div class="inner">
            <div class="item">
              <h4>710</h4>
              <span>
                <i class="icon-dot" style="color: #006cff"></i>
                设备总数
              </span>
            </div>
            <div class="item">
              <h4>190</h4>
              <span>
                <i class="icon-dot" style="color: #6acca3"></i>
                季度新增
              </span>
            </div>
            <div class="item">
              <h4>697</h4>
              <span>
                <i class="icon-dot" style="color: #6acca3"></i>
                运营设备
              </span>
            </div>
            <div class="item">
              <h4>13</h4>
              <span>
                <i class="icon-dot" style="color: #ed3f35"></i>
                异常设备
              </span>
            </div>
          </div>
        </div>
        <div class="panel bar">
          <h2>柱状图-监测点数量</h2>
          <div ref="mCount_bar" class="chart"></div>
        </div>
        <div class="panel radar">
          <h2>雷达图-水质量分布情况</h2>
          <div ref="mCount_radar" class="chart"></div>
        </div>
      </div>
      <div class="column">
        <div class="panel map">
          <h2>监测点分布</h2>
          <div ref="point_map" class="chart"></div>
        </div>
        <div class="panel warning">
          <div
            class="message_scroll_box"
            @mouseenter="rollStop()"
            @mouseleave="rollStart(60)"
          >
            <div id="scroll1">
              <div class="message_scroll">
                <div class="scroll_top">
                  <span class="scroll_title">高锰酸盐超标警告</span>
                  <span class="scroll_level scroll_level01">一级</span>
                  <a class="localize"></a>
                  <span class="scroll_timer">17-09-13/9:52</span>
                </div>
                <div class="msg_cage">
                  <a class="localize_title"
                    ><span><label>编号</label>：GH32101</span
                    ><span class="right"
                      ><label>监测值</label>：1.1(mg/Ls)</span
                    ></a
                  >
                </div>
                <div class="msg_cage">
                  <a class="localize_msg">xx阳市沱江一段21号排污口处</a>
                </div>
              </div>
              <div class="message_scroll">
                <div class="scroll_top">
                  <span class="scroll_title">总磷超标警告</span>
                  <span class="scroll_level scroll_level03">三级</span>
                  <a class="localize"></a>
                  <span class="scroll_timer">17-09-13/9:52</span>
                </div>
                <div class="msg_cage">
                  <a class="localize_title"
                    ><span><label>编号</label>：GH32101</span
                    ><span class="right"
                      ><label>监测值</label>：1.1(mg/Ls)</span
                    ></a
                  >
                </div>
                <div class="msg_cage">
                  <a class="localize_msg">xx阳市沱江一段21号排污口处</a>
                </div>
              </div>
              <div class="message_scroll">
                <div class="scroll_top">
                  <span class="scroll_title">高锰酸盐超标警告</span>
                  <span class="scroll_level scroll_level02">二级</span>
                  <a class="localize"></a>
                  <span class="scroll_timer">17-09-13/9:52</span>
                </div>
                <div class="msg_cage">
                  <a class="localize_title"
                    ><span><label>编号</label>：GH32101</span
                    ><span class="right"
                      ><label>监测值</label>：1.1(mg/Ls)</span
                    ></a
                  >
                </div>
                <div class="msg_cage">
                  <a class="localize_msg">xx阳市沱江一段21号排污口处。</a>
                </div>
              </div>
              <div class="message_scroll">
                <div class="scroll_top">
                  <span class="scroll_title">高锰酸盐超标警告</span>
                  <span class="scroll_level scroll_level01">一级</span>
                  <a class="localize"></a>
                  <span class="scroll_timer">17-09-13/9:52</span>
                </div>
                <div class="msg_cage">
                  <a class="localize_title"
                    ><span><label>编号</label>：GH32101</span
                    ><span class="right"
                      ><label>监测值</label>：1.1(mg/Ls)</span
                    ></a
                  >
                </div>
                <div class="msg_cage">
                  <a class="localize_msg">xx阳市沱江一段21号排污口处</a>
                </div>
              </div>
            </div>
            <div id="scroll2"></div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="panel info">
          <div class="title">监测点信息</div>
          <div class="point_info">
            <div>
              <span class="name">省份: </span
              ><span class="answer">{{ clickPoint.province }}</span>
            </div>
            <div>
              <span class="name">地市: </span
              ><span class="answer">{{ clickPoint.prefecture }}</span>
            </div>
            <div>
              <span class="name">海域: </span
              ><span class="answer">{{ clickPoint.sea_area }}</span>
            </div>
            <div>
              <span class="name">监测点: </span
              ><span class="answer">{{ clickPoint.monitor_point_code }}</span>
            </div>
          </div>
        </div>
        <div class="panel table_num">
          <h2>重点监测数据</h2>
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>日期</th>
                <th>溶解氧</th>
                <th>PH</th>
                <th>石油类</th>
                <th>无机氮</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in clickPointData" :key="item.id">
                <td>{{ item.monitor_time }}</td>
                <td>{{ item.DO }}mg/L</td>
                <td>{{ item.PH }}</td>
                <td>{{ item.petroleum }}mg/L</td>
                <td>{{ item.DIN }}mg/L</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import shandong from "../../public/province/shandong.json";
import guangdong from "../../public/province/guangdong.json";
import fujian from "../../public/province/fujian.json";

export default {
  data() {
    return {
      time: null,
      scroll: null,
      monitor_number: [],
      mapOption: {},
      allPoint: [],
      clickPoint: {},
      clickPointData: {},
    };
  },
  created() {
    this.timing();
    this.getMonPointCount();
    this.getAllPointInfo();
  },
  mounted() {
    this.drawWQualityChart();
    // this.getMapOption();
    // this.drawMap();
    this.roll(60);
  },
  computed: {},
  watch: {
    monitor_number() {
      this.$nextTick(() => {
        this.drawNumBarChart();
      });
    },
    // 获取监测数据,根据点位修改重点监测数据
    clickPoint() {
      this.$nextTick(() => {
        this.getClickPointData();
      });
    },
    // 绘制地图的点
    allPoint() {
      this.$nextTick(() => {
        this.getMapOption();
        this.drawMap();
      });
    },
  },
  beforeDestroy() {
    // 不销毁会在其他页面也执行，浪费性能
    clearInterval(this.timing);
    this.time = null;
    if (this.scroll) clearInterval(this.scroll);
  },
  methods: {
    // 当前时间显示
    timing() {
      setInterval(() => {
        this.time = this.common.getRealTime();
      }, 1000);
    },
    // 获取省份各监测点数量
    getMonPointCount() {
      this.$axios({
        url: "getMonPointCount",
        params: {
          work_province: this.$store.state.userInfo.work_province,
        },
      })
        .then((res) => {
          this.monitor_number = res.data;
        })
        .catch((err) => err);
    },
    // 获取所有监测点信息
    getAllPointInfo() {
      this.$axios({
        url: "getAllPointInfo",
        params: {
          work_province: this.$store.state.userInfo.work_province,
        },
      })
        .then((res) => {
          this.allPoint = res.data;
          this.clickPoint = res.data[0];
        })
        .catch((err) => err);
    },
    // 绘制市级监测点柱状图
    drawNumBarChart() {
      const echartsNum = this.$echarts.init(this.$refs.mCount_bar);
      let xData = [];
      let seriesData = [];
      for (let item of this.monitor_number) {
        xData.push(item.prefecture);
        seriesData.push(item.number);
      }
      const option = {
        xAxis: {
          type: "category",
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      echartsNum.setOption(option);
    },
    // 绘制水质分布雷达图
    drawWQualityChart() {
      const echartsQuality = this.$echarts.init(this.$refs.mCount_radar);
      const option = {
        legend: {
          type: "scroll",
          bottom: 10,
          data: ["一季度", "二季度", "三季度", "四季度"],
          textStyle: {
            fontSize: 12,
            color: "#ade3ff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        radar: {
          indicator: [
            { name: "一类", max: 55 },
            { name: "二类", max: 40 },
            { name: "三类", max: 35 },
            { name: "四类", max: 35 },
            { name: "劣四类", max: 35 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [40, 25, 17, 11, 7],
                name: "一季度",
              },
              {
                value: [41, 21, 19, 6, 13],
                name: "二季度",
              },
              {
                value: [45, 16, 9, 17, 13],
                name: "三季度",
              },
              {
                value: [53, 26, 7, 9, 5],
                name: "四季度",
              },
            ],
          },
        ],
      };
      echartsQuality.setOption(option);
    },
    // 生成绘制地图的option
    getMapOption() {
      var _this = this;
      let work_province = this.$store.state.userInfo.work_province;
      let mapName;
      if (work_province == "福建") {
        mapName = "fujian";
      } else if (work_province == "广东") {
        mapName = "guangdong";
      } else if (work_province == "山东") {
        mapName = "shandong";
      }
      let mapPointData = [];
      for (let i = 0; i < _this.allPoint.length; i++) {
        this.allPoint[i];
        mapPointData.push({
          name: this.allPoint[i].monitor_point_code,
          value: [this.allPoint[i].longitude, this.allPoint[i].latitude],
        });
      }
      this.mapOption = {
        color: ["#5470c6"],
        tooltip: {
          trigger: "item",
          renderMode: "html",
          // 触发方式
          triggerOn: "click",
          enterable: true,
          backgroundColor: "#fff",
          padding: 0,
          textStyle: {
            color: "#000",
            fontSize: "14",
          },
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        },
        dispatchAction: {
          type: "downplay",
        },
        roam: false,
        roamController: {
          show: true,
          x: "right",
          mapTypeControl: {
            china: true,
          },
        },
        series: [
          {
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            color: ["#f00"],
            tooltip: {
              position: "left",
              color: "#000",
              formatter(d) {
                _this.clickChange(d.data.name);
                return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
              },
            },
            data: mapPointData,
          },
        ],
        geo: {
          show: true,
          map: mapName,
          type: "map",
          mapType: mapName,
          roam: false,
          zoom: 1.2,
          label: {
            normal: {
              // 显示省份标签
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: true,
              // 选中后的字体样式
              textStyle: {
                color: "#000",
                fontSize: 14,
              },
            },
          },
          itemStyle: {
            color: "#ddb926",
            normal: {
              areaColor: "#8abcd1",
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              borderWidth: 0.5,
              borderColor: "#8abcd1",
              areaColor: "#fff",
            },
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
      };
    },
    // 点击改变当前展示点位信息
    clickChange(point_name) {
      this.$axios({
        url: "getClickPointInfo",
        params: {
          monitor_point_code: point_name,
        },
      })
        .then((res) => {
          console.log(res.data);
          this.clickPoint = res.data;
        })
        .catch((err) => err);
    },
    // 绘制监测点地图
    drawMap() {
      let work_province = this.$store.state.userInfo.work_province;
      if (work_province == "福建") {
        this.$echarts.registerMap("fujian", fujian, {});
      } else if (work_province == "广东") {
        this.$echarts.registerMap("guangdong", guangdong, {});
      } else if (work_province == "山东") {
        this.$echarts.registerMap("shandong", shandong, {});
      }
      const mapChart = this.$echarts.init(this.$refs.point_map);
      mapChart.setOption(this.mapOption);
    },
    // 滚动警告信息
    roll(t) {
      var s1 = document.getElementById("scroll1");
      var s2 = document.getElementById("scroll2");
      var sbox = document.getElementsByClassName("message_scroll_box")[0];
      s2.innerHTML = s1.innerHTML;
      sbox.scrollTop = 0;
      this.rollStart(t);
    },
    rollStart(t) {
      var s1 = document.getElementById("scroll1");
      var s2 = document.getElementById("scroll2");
      var sbox = document.getElementsByClassName("message_scroll_box")[0];
      this.rollStop();
      this.scroll = setInterval(() => {
        // 当滚动高度大于列表内容高度时恢复为0
        if (sbox.scrollTop >= s1.scrollHeight) {
          sbox.scrollTop = 0;
        } else {
          sbox.scrollTop++;
        }
      }, t);
    },
    rollStop() {
      clearInterval(this.scroll);
    },
    // 获取当前展示监测点的监测数据 天 近15条
    getClickPointData() {
      this.$axios({
        url: "getClickPointData",
        params: {
          monitor_point_code: this.clickPoint.monitor_point_code,
        },
      })
        .then((res) => {
          this.clickPointData = res.data;
        })
        .catch((err) => err);
    },
    // 跳转到查看各项指标页面
    gotoSeeAllData() {
      this.$router.push({ path: "/seeAllData" });
    },
  },
};
</script>
<style lang="less" scoped>
.body {
  background-repeat: no-repeat;
  background-color: #101129;
  background-size: cover;
  /* 行高是字体1.15倍 */
  line-height: 1.15;
}
header {
  position: relative;
  height: 100px;
  background: url("@/assets/img/head_bg.png") no-repeat top center;
  background-size: 100% 100%;
  .jump {
    color: #fff;
    position: absolute;
    top: 0;
    left: 35px;
    line-height: 90px;
    cursor: pointer;
  }
  .jump:hover {
    color: #10a4db;
  }
  h1 {
    color: #fff;
    text-align: center;
    line-height: 1rem;
    font-size: 36px;
    line-height: 90px;
    margin: 0 auto;
  }
  .showTime {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 20px;
    line-height: 90px;
    color: rgba(255, 255, 255, 0.7);
  }
}

.mainbox {
  padding: 10px 30px 0;
  display: flex;
  .column {
    flex: 3;
  }
  .column:nth-child(2) {
    flex: 5;
    margin: 0 20px 15px;
    overflow: hidden;
  }
}

.panel {
  position: relative;
  background: url("@/assets/img/border.png");
  background-size: 100% 100%;
  padding: 0 10px 20px;
  margin-bottom: 10px;
  color: #fff;
  h2 {
    height: 24px;
    line-height: 50px;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
  }
}
.bar {
  margin-top: 20px;
  .chart {
    height: 300px;
    width: 100%;
  }
}
.radar {
  margin-top: 20px;
  .chart {
    height: 270px;
    width: 100%;
  }
}
.map {
  .chart {
    height: 450px;
    width: 100%;
  }
}
.warning {
  .message_scroll_box {
    height: 240px;
    padding: 20px;
    overflow: hidden;
  }
  .message_scroll {
    border: rgba(12, 122, 200, 0.5) 1px solid;
    background-color: rgba(20, 66, 125, 0.12);
    height: 80px;
    cursor: pointer;
    margin-bottom: 6px;
    .scroll_top {
      height: 25px;
      span {
        float: left;
        background-repeat: no-repeat;
        line-height: 25px;
        color: white;
      }
      .scroll_title {
        background-image: url("@/assets/img/pushMessage_class.png");
        width: 150px;
        font-size: 14px;
        text-align: center;
      }
      .scroll_level {
        width: 56px;
        background-position-y: 3px;
        font-size: 12px;
        text-align: center;
        margin-left: 8px;
      }
      .scroll_level01 {
        background-image: url("@/assets/img/pushmessage_level01.png");
      }
      .scroll_level02 {
        background-image: url("@/assets/img/pushmessage_level02.png");
      }
      .localize {
        display: block;
        line-height: 25px;
        margin-left: 8px;
        background-image: url("@/assets/img/pushmessage_localize_01.png");
        background-repeat: no-repeat;
        background-position-y: 3px;
        width: 14px;
        height: 25px;
        float: left;
      }
      .localize:hover {
        background-image: url("@/assets/img/pushmessage_localize_02.png");
      }
      .scroll_timer {
        color: #4a97da;
        font-size: 12px;
        line-height: 25px;
        text-align: right;
        display: block;
        float: right;
        margin-right: 5px;
      }
    }
    .msg_cage {
      padding-left: 10px;
      padding-right: 6px;
      height: 18px;
      overflow: hidden;
      margin-top: 8px;
      .localize_title {
        color: #2c85d2;
        .right {
          float: right;
        }
        .left {
          float: left;
        }
      }
      .localize_msg {
        font-size: 14px;
        color: white;
      }
    }
  }
}

.info {
  .title {
    padding: 15px 5px 0px;
    height: 30px;
    font-size: 24px;
    font-weight: 600;
  }
  .point_info {
    padding-left: 10px;
    > div {
      display: inline-block;
      width: 50%;
      // margin-left: 5px;
      height: 24px;
      margin-top: 20px;
      .name {
        line-height: 24px;
      }
      .answer {
        font-size: 24px;
        color: #10a4db;
      }
    }
  }
}

.table_num {
  margin-top: 20px;
  .table {
    width: 100%;
    margin-bottom: 10px;
    margin-top: 20px;
    border-collapse: collapse;
  }
  .table-bordered {
    border: 1px #3490ba solid;
    thead {
      background-color: #3490ba;
      tr {
        border: none;
        font-size: 15px;
        th {
          border: 1px #3490ba solid;
          vertical-align: top;
        }
      }
    }
    tbody {
      display: table-row-group;
      vertical-align: middle;
      border-color: inherit;
      tr {
        border-bottom: 1px #3490ba solid;
        height: 40px;
        line-height: 40px;
        td {
          font-size: 14px;
          border: 1px #3490ba solid;
          vertical-align: top;
          text-align: center;
        }
      }
    }
  }
}

.overview {
  .inner {
    display: flex;
    justify-content: space-between;
    h4 {
      font-size: 22px;
      padding-left: 15px;
      color: #fff;
      margin-bottom: 10px;
    }
    span {
      font-size: 14px;
      color: #4c9bfd;
      padding-left: 10px;
    }
  }
}
</style>
